<template>
  <div class="list-item-container">
    <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
      <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
        <template v-for="{ type, text } in actions" slot="actions">
          <span :key="type">
            <a-icon :type="type" style="margin-right: 8px" />
            {{ text }}
          </span>
        </template>
        <a-list-item-meta :description="item.description">
          <a slot="title" :href="item.href">{{ item.title }}</a>
        </a-list-item-meta>
        {{ item.content }}
      </a-list-item>
    </a-list>
  </div>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss'>
@import './_index.scss';
</style>